<template>
  <div class="header">城市选择
    <router-link to="/">
      <div class="iconfont header-back">&#xe624;</div>
    </router-link>
    <div class="choose">
      <ul>
        <li class="active">境内</li>
        <li>境外/港澳台</li>
      </ul>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "cityHeader"
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.header {
  line-height: 0.76rem;
  background: $bgColor;
  color: #fff;
  text-align: center;
  font-size: 0.32rem;
  position: relative;
}

.header-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.64rem;
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
}

.choose {
  height: 0.4rem;
  line-height: 0.4rem;
  background-color: #00bcd4;
  padding: 0.2rem 1rem;
  color: #fff;
  border-top: 1px solid #fff;
}

.choose ul {
  border: 1px solid #fff;
  border-radius: 0.03rem;
  zoom: 1;
  overflow: hidden;
}

.choose ul li {
  width: 50%;
  float: left;
  text-align: center;
  background-color: #00bcd4;
  font-size: 0.28rem;
  color: #fff;
}

.choose ul li.active {
  background-color: #fff;
  color: #00bcd4;
}
</style>